<template>
    <div class="place">
    <Nav></Nav>
    <Nav2 @get_place_id="get_id"></Nav2>
        <div class="container">
            <div class="row">
                <h1>{{place_obj.name}}</h1>
                <div class="product" v-for="product in place_obj.product_list" :key="product.name">
                    <img :src="img_url+product.cover" alt="" class="image">
                    <h4 class=desc>{{ product.title}}</h4>
                    <h5 class=desc style="color: #79747d">{{ product.desc}}</h5>
                    <span class="money">¥{{product.price}} /人</span>
                    <hr>
                </div>
            </div>
        </div>

    <Chat></Chat>
    <Foot></Foot>
        </div>
</template>

<script>
      import Nav from '../components/Nav'
    import Nav2 from '../components/Nav2'
    import Chat from '../components/Chat'
    import Foot from '../components/Foot'
    export default {
        name: "Place",
        data(){
            return {
                place_obj:'',
                img_url:this.$settings.base_url+'/media/'
            }
        },
        components:{
            Nav, Nav2, Chat, Foot
        },
        methods:{
            get_id(){
                this.place_id = this.$route.params.pk;
                this.$axios({
                    url: this.$settings.base_url + '/product/place/' + this.place_id
                }).then(response => {
                    this.place_obj = response.data;
                });
            }
        },
        created(){
            this.get_id()
        }
    }
</script>

<style scoped>
h1 {
    text-align: center;
}
        .product {
        width: 335px;
        height: 315px;
        background: white;
        display: inline-block;
        margin-left: 50px;
        margin-top: 60px;
    }

    .desc {
        display: block;
        text-align: center;
        cursor: pointer;
    }

    .image {
        width: 335px;
        height: 220px;
        display: block;
        border-radius: 8px;
        cursor: pointer;
    }

    .money {
        color: #ff2b8a;
        display: block;
        text-align: center;
        margin-bottom: 10px;
        cursor: pointer;

    }
</style>